<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
    <style>
        .kerwin-enter-active{
            animation: aaa 1.5s;
        }
        .kerwin-leave-active{
            animation: aaa 1.5s reverse;
        }

        @keyframes aaa {
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="isShow = !isShow">点击</button>

        <!-- 他可以自己判断,当消失或者出现来添加不同的class来显示不同的效果 -->
        <!-- transition   enter-active-class  固定写法 -->


        <!-- <transition enter-active-class="kerwin-enter-active" leave-active-class="kerwin-leave-active" >
            <div v-show="isShow">\\\\\\\\\\\\\\\\</div>
        </transition> -->



        <!-- 简写形式   但是上面的类,必须要写成enter-active结尾的,才能这样简写-->
        <!-- 加上appear是一出场就有动画 -->
        <transition name="kerwin" appear>
            <div v-show="isShow">\\\\\\\\\\\\\\\\</div>
        </transition>


        <transition name="kerwin" appear>
            <!-- 下面保持一个节点 -->
            <div v-show="isShow">
                <div>
                    <div>11111</div>
                    <div>22222222</div>
                    <div>44444</div>
                    <div>5555</div>
                </div>
            </div>
        </transition>
        

        <!-- <div v-show="isShow" class="kerwin-enter-active">\\\\\\\\\\\\\\\\</div> -->
    </div>


    <script>
        let vm = new Vue({
            el:"#box",
            data:{

                // isShow:false
                isShow:true
            }
        })
    </script>
</body>
</html>